﻿<UserControl x:Class="VisualImageTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	xmlns:local="clr-namespace:VisualImageTest"
	xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

	<UserControl.Resources>

		<local:CornerRadiusConverter x:Key="cornerRadiusConverter"/>

		<Style x:Key="reflection" TargetType="Image">
			<Setter Property="OpacityMask">
				<Setter.Value>
					<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
						<GradientStop Offset="0" Color="#00FFFFFF"/>
						<GradientStop Offset="1" Color="#50FFFFFF"/>
					</LinearGradientBrush>
				</Setter.Value>
			</Setter>
			<Setter Property="RenderTransformOrigin" Value="0.5,0.45"/>
			<Setter Property="RenderTransform">
				<Setter.Value>
					<ScaleTransform ScaleY="-0.8"/>
				</Setter.Value>
			</Setter>
		</Style>

	</UserControl.Resources>

	<Grid x:Name="LayoutRoot">

		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition/>
		</Grid.RowDefinitions>

		<Grid.ColumnDefinitions>
			<ColumnDefinition/>
			<ColumnDefinition Width="5"/>
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>

		<CheckBox Name="liveRefresh" Grid.ColumnSpan="3" IsChecked="True"
				  Content="Live refresh" Margin="0,0,0,5"/>

		<StackPanel Grid.Row="1" Grid.Column="0" VerticalAlignment="Center">
			<toolkit:Viewbox x:Name="myTextInput">
			<StackPanel Orientation="Horizontal">
				<TextBlock Text="TextBox" Margin="0,0,5,0" VerticalAlignment="Center"/>
				<TextBox Text="Reflected text" Background="#E0FFE0"/>
			</StackPanel>
			</toolkit:Viewbox>
			<local:VisualImage x:Name="myTextImage" Visual="{Binding ElementName=myTextInput}"/>
			<Image Source="{Binding Bitmap, ElementName=myTextImage}" Style="{StaticResource reflection}"/>
		</StackPanel>

		<Grid Grid.Row="1" Grid.Column="2">
			<Grid.RowDefinitions>
				<RowDefinition/>
				<RowDefinition Height="Auto"/>
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition/>
				<ColumnDefinition Width="Auto"/>
			</Grid.ColumnDefinitions>
			<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
				<Border Name="mask" CornerRadius="{Binding Value, ElementName=cornerRadius, Converter={StaticResource cornerRadiusConverter}}"
						Background="White"/>
				<local:VisualImage x:Name="myRoundedImage" Visual="{Binding ElementName=mask}"
								   ImageBrush="{Binding ElementName=myRoundedBrush}"/>
				<Grid>
					<Grid.OpacityMask>
						<ImageBrush x:Name="myRoundedBrush"/>
					</Grid.OpacityMask>
					<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Loading image..."/>
					<Image Name="myImage" Source="http://farm2.static.flickr.com/1298/734652402_de97d867f0_b.jpg" RenderTransformOrigin="0.5,0.5">
						<Image.RenderTransform>
							<ScaleTransform x:Name="imageScale"/>
						</Image.RenderTransform>
					</Image>
				</Grid>
			</Grid>
			<Slider Name="cornerRadius" Grid.Row="1" Margin="0,5,0,0" Minimum="0" Maximum="100" Value="20" ValueChanged="Slider_ValueChanged"/>
			<Slider Name="scale" Grid.Column="1" Margin="5,0,0,0" Orientation="Vertical" Minimum="1" Maximum="5" Value="1" ValueChanged="Scale_ValueChanged"/>
		</Grid>

	</Grid>

</UserControl>
